<template>
	<view class="">
		<navBar :title="title"></navBar>
		<view class="list" @click="toDetails(item)" v-for="(item, index) in pageData" :key="index">
			<text class="color-222 size28 bold500">{{ item.firmName }}</text>
			<view class="Box">
				<image :src="imgUrls(item.cover)" mode="aspectFill" class="Logo"></image>
				<view class="Info">
					<text>地址：{{ item.address }}</text>
					<text @click.stop="Call(item.tel)">电话：{{ item.tel }}</text>
				</view>
			</view>
		</view>

		<view class="rows m-top100" v-if="!pageData.length">
			<up-empty mode="list" text="暂无相关内容~"></up-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue';
	import Http from '@/utils/request.js';
	import { imgUrls, Call, toUrl } from '@/utils/utils.js';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
	const page = ref(1);
	const limit = ref(10);
	const getMore = ref(true);
	const pageData = ref([]);
	const type = ref(1); // type 1 鉴定 2 公证
	onLoad((opt) => {
		if (opt.type) type.value = opt.type;
		getLawyerFirmList();
	});

	const getLawyerFirmList = () => {
		Http.get({
			url: '/hr/getLawyerFirmList',
			data: {
				page: page.value,
				limit: limit.value,
				type: type.value,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data.list || [];
			page.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (result.length < limit.value) return (getMore.value = false);
		});
	};

	const toDetails = (Item) => {
		if (!Item.id) return;
		toUrl(`details?id=${Item.id}`);
	};

	const title = computed(() => {
		return type.value == 1 ? '找鉴定' : '找公证';
	});

	onReachBottom(() => {
		if (!getMore.value) return;
		page.value++;
		getLawyerFirmList();
	});
</script>

<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 710rpx;
		margin: 24rpx auto 0;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 24rpx;
		.Box {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			.Logo {
				width: 106rpx;
				height: 106rpx;
				border-radius: 10rpx;
				margin-right: 16rpx;
			}
			.Info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #666;
				font-size: 26rpx;
			}
		}
	}
</style>
